<template>
	<view>
		<view class="search-bar">
			<view class="search_first" @click="goToDatail('./message_search/message_search')">
				<uni-icons style="margin-left: 5%;" color="#e0e0e0" type="search" size="20"></uni-icons>
				<text>输入关键字检索</text>
			</view>
		</view>
		<view class="msgcontent">
			<!-- 待办 -->
			<view class="msg" @click="goToDatail('./message_backlog/message_backlog')">
				<view class="msgleft">
					<view class="orange">
						<image src="http://106.14.56.171:15016/images/messageicon/u2189.png" mode=""></image>
					</view>
				</view>
				<view class="msgright">
					<view class="msgright_top">
						<text class="titlemsg">待办</text>
						<view class="titletime">
							<text
								class="fontgray">{{blocklogObj[0]&&blocklogObj[0].pushTime?blocklogObj[0].pushTime.substring(5).replace(/-/g, '/').replace('T',' ').slice(0,11):''}}</text>
						</view>

					</view>
					<view class="msgright_bottom">
						<image v-if="blocklogObj[0] && blocklogObj[0].isRead === 0 && blocklogObj[0].pushTime"
							src="http://106.14.56.171:15016/images/index/u265.png" />{{''}}
						<text class="fontgray">{{blocklogObj[0]&&blocklogObj[0].content || '暂无待办'}}</text>
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="msg" @click="goToDatail('./message_notice/message_notice')">
				<view class="msgleft">
					<view class="green">

						<image src="http://106.14.56.171:15016/images/messageicon/u2175.png" mode=""></image>
					</view>
				</view>
				<view class="msgright">
					<view class="msgright_top">
						<text class="titlemsg">公告</text>
						<view class="titletime">
							<text
								class="fontgray">{{announcementlistsgong[0] && announcementlistsgong[0].pushTime ? announcementlistsgong[0].pushTime.substring(5).replace(/-/g, '/').replace('T',' ').slice(0,11):''}}</text>
						</view>

					</view>
					<view class="msgright_bottom">
						<image v-if="announRed" src="http://106.14.56.171:15016/images/index/u265.png" />{{' '}}
						<text
							class="fontgray">{{announcementlistsgong[0]&&announcementlistsgong[0].title || '暂无公告'}}</text>
					</view>
				</view>
			</view>
			<!-- 消息 -->
			<view class="msg" @click="goToDatail('./message_msg/message_msglist')">
				<view class="msgleft">
					<view class="blue">
						<image src="http://106.14.56.171:15016/images/messageicon/u2161.png" mode="" />
					</view>
				</view>
				<view class="msgright" style="border: none;">
					<view class="msgright_top">
						<text class="titlemsg">消息</text>
						<view class="titletime">
							<text
								class="fontgray">{{lists[0]&&lists[0].noticeTime ? lists[0].noticeTime.substring(5).replace(/-/g, '/').replace('T',' ').slice(0,11):''}}</text>
						</view>
					</view>
					<view class="msgright_bottom">
						<image v-if="messageRed" src="http://106.14.56.171:15016/images/index/u265.png" />{{' '}}
						<text class="fontgray">{{ lists[0]&&lists[0].noticeContent || '暂无消息' }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订阅通知 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="snotificaTions" @click="promber">
			<text>订阅通知，实时关注项目进度。</text>
			<view class=""><text>订阅通知</text></view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		CurrentRouter
	} from '@/config/CurrentRouter.js'
	export default {
		data() {
			return {
				content: '', //公告内容
				noticeContent: '', //消息内容
				// 公告里面的data
				announcementData: {
					pageNo: 1,
					pageSize: 10,
					searchValue: '',
					searchBeginTime: '',
					searchEndTime: '',
					sortField: '',
					sortOrder: '',
					descStr: ''
				},
				// 消息列表的data
				messageData: {
					searchValue: '',
					pageNo: 1,
					pageSize: 10,
				},
				announcementlistsgong: [], //获取公告列表lists
				lists: [], //获取消息列表lists
				blocklogObj: [], //待办内容
			}
		},
		// 微信分享个人
		onShareAppMessage(options) {},
		// 微信分享到朋友圈
		onShareTimeline(options) {},
		onShow() {
			this.announcementList(); //获取公告列表
			

			if (uni.getStorageSync("accessToken")) { //当没有token的时候，不调用接口
				this.fetchmessageList(); //获取消息列表
				this.announcementLists(); //待办
			}
		},
		computed: {
			...mapState(['userInfo']),
			// 消息
			messageRed() {
				if (!Array.isArray(this.lists) || this.lists.length == 0) {
					return false
				}
				let lenght = this.lists.filter(v => {
					return v.readed == 0
				}).length
				if (lenght) {
					return true
				}
				return false
			},
			// 公告
			announRed() {
				if (!Array.isArray(this.announcementlistsgong) || this.announcementlistsgong.length == 0) {
					return false
				}
				let lenght = this.announcementlistsgong.filter(v => {
					return v.isRead == false
				}).length
				if (lenght) {
					return true
				}
				return false
			},
		},
		methods: {
			// 获取消息列表调接口	
			fetchmessageList() {
				var data = {
					...this.messageData
				};
				this.$http.post('api/Message/GetMessageList', data).then(res => {
					// console.log('获取消息列表', res.items);
					this.lists = res.items
				});
			},
			// 获取公告列表调接口
			announcementList() {
				var data = {
					...this.announcementData
				};
				this.$http.post('api/Notice/GetNoticeList', data).then(res => {
					// console.log('获取公告列表', res);
					this.announcementlistsgong = res.items;
				});
			},
			// 获取待办数据
			announcementLists() {
				this.$http.get('api/Home/GetHomeMessage', {
					companyName: this.userInfo.corpName
				}).then(res => {
					// console.log('res', res);
					let blocklog = []
					blocklog = res.filter(item => item.type == 1);
					this.blocklogObj = blocklog
					// console.log('-------', this.blocklogObj);
				});
			},
			goToDatail(url) {
				if (url == './message_notice/message_notice') {
					uni.navigateTo({
						url
					});
					return
				}
				let userCode = CurrentRouter({})
				if (userCode) return
				uni.navigateTo({
					url
				});
			},
			promber() {
				var _that = this
				uni.requestSubscribeMessage({
					tmplIds: ['08eXIMrjBQRvMd1iI5mS7kAYjiA-5Stl4nVTV2EMDIE'],
					success(res) {
						console.log(res, '总是') //值包括'accept':同意、'reject':拒绝、'ban':后台禁用
						if (res.errMsg == 'requestSubscribeMessage:ok') {
							uni.getSetting({
								withSubscriptions: true,
								success(res) {
									if (res.subscriptionsSetting.mainSwitch) {
										if (res.subscriptionsSetting.itemSettings != null) {
											uni.showToast({
												title: '订阅成功',
												icon: 'none'
											});
										} else {}
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-bar {
		display: flex;
		align-items: center;
	}

	.search_first {
		background-color: #f8f8f8;
		// border: 1px solid #FFFFFF;
		background-color: #fff;
		height: 80rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		width: 100%;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		margin: 18rpx;
		justify-content: start;
		font-size: 14px;

		>text {
			margin-left: 25rpx;
			color: #8f8f8f;
		}
	}

	.msgcontent {
		width: 96%;
		margin-left: 2%;
		background-color: #fff;
		margin-top: 10rpx;
		border-radius: 24rpx;
	}

	.msg {
		height: 135rpx;
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		// background: #04be02;
	}

	.msgleft {
		width: 20%;
		justify-content: center;
		/* 子元素水平居中 */
		align-items: center;
		/* 子元素垂直居中 */
		display: -webkit-flex;
	}

	.msgleft view {
		width: 67%;
		height: 95rpx;
		border-radius: 20rpx;
		justify-content: center;
		/* 子元素水平居中 */
		align-items: center;
		/* 子元素垂直居中 */
		display: -webkit-flex;

	}

	.orange {
		background-color: #EDBA47;
	}

	.green {
		background-color: #4DBC85;
	}

	.blue {
		background-color: #4999FB;
	}

	.fontgray {
		font-size: 22rpx;
		color: #a9a9a9;
		// margin-left: 10rpx;

	}

	.Text {
		width: 40rpx;
		height: 50rpx;
		background-color: #04be02;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}


	.msgleft view image {
		width: 60rpx;
		height: 60rpx;
		display: flex;
	}

	.titlemsg {
		font-size: 30rpx;
		font-weight: 400;
	}

	.titletime {
		float: right;
	}

	.msgright {
		flex-direction: column;
		width: 75%;
		border-bottom: 4rpx solid #f5f5f5;

		// background-color: #04be02;
		>view {
			margin-top: 15rpx;
		}
	}

	.msgright_top {
		width: 100%;
		// background-color: skyblue;

	}

	.msgright_bottom {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		>image {
			width: 13rpx;
			height: 13rpx;
		}

	}

	// 订阅通知
	.snotificaTions {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		margin: auto;
		background-color: rebeccapurple;
		padding: 15rpx 0 15rpx 0;
		border-radius: 10rpx 10rpx 0 0;
		font-size: 26rpx;
		background-color: #E8E8E8;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>text:nth-child(1) {
			margin-left: 26rpx;
		}

		>view {
			width: 200rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			margin-right: 26rpx;
			background-color: #fff;
			border: 1px solid #b5001e;
			border-radius: 10rpx;
			color: #b5001e;
		}
	}

	.promptBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;

			>image {
				width: 600rpx;
				height: 1000rpx;
			}
		}

		.closeeBox {
			width: 600rpx;
			background-color: #fff;
			text-align: center;
			padding-bottom: 20rpx;
			line-height: 50rpx;

			>view {
				position: relative;
				top: 10rpx;
				left: 120px;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				border: 1px solid red;
				text-align: center;
				line-height: 52rpx;
			}
		}
	}

	// .promptBox {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;

	// 	>view {
	// 		display: flex;
	// 		flex-direction: column;
	// 		align-items: center;

	// 		>image {
	// 			width: 600rpx;
	// 			height: 1000rpx;
	// 		}
	// 	}
	// 	.closeeBox {
	// 		width: 600rpx;
	// 		background-color: #fff;
	// 		text-align: center;
	// 		padding-bottom: 20rpx;

	// 		>text {
	// 			position: relative;
	// 			top: 10rpx;
	// 			left: 140px;
	// 		}
	// 	}

	// }
</style>